import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import { Card, ConfigProvider, Table, Collapse, Form, Button } from 'antd';
import { ColumnsType, SorterResult } from 'antd/es/table';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import zhCN from 'antd/lib/locale/zh_CN';
import ScoreAnalysis from '../ScoreAnalysis';

import styles from './index.less';

interface DataType {
  order: number;
  stuName: string;
  stuNumber: string;
  className: string;
  classAdvisor: string;
  score: number;
  gpa: number;
  classRank: string;
  majorRank: string;
}
const columns: ColumnsType<DataType> = [
  {
    title: '序号',
    dataIndex: 'order',
  },
  {
    title: '姓名',
    dataIndex: 'stuName',
  },
  {
    title: '学号',
    dataIndex: 'stuNumber',
  },
  {
    title: '班级',
    dataIndex: 'className',
  },
  {
    title: '辅导员',
    dataIndex: 'classAdvisor',
  },
  {
    title: '平均成绩',
    dataIndex: 'score',
  },
  {
    title: '平均绩点',
    dataIndex: 'gpa',
  },
  {
    title: '班级排名',
    dataIndex: 'classRank',
  },
  {
    title: '专业排名',
    dataIndex: 'majorRank',
  },
];
const ScoreList: React.FC<any> = () => {
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>(null);
  const [result, setResult] = useState([]);
  const [initialData, setInitialData] = useState<Array<DataType>>([]); // 保存初始数据

  useEffect(() => {
    dispatch({
      type: 'Model_StudentAnalysisStudentModel/getMentorMasterScoreListEffects',
      payload: {
        data: '2011086',
        callback: (value: any) => {
          // console.log('#############'+value);
          setResult(value);
          setInitialData(value); // 保存初始数据
        },
      },
    });
  }, []);

  const handleChange: TableProps<DataType>['onChange'] = (
    pagination,
    filters,
    sorter,
  ) => {
    // 处理筛选逻辑
  };

  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let stuName = values.stuName;
    let classAdvisor = values.classAdvisor;
    // 过滤逻辑
    let filteredData = result.filter((item: DataType) => {
      if (stuName && item.stuName && !item.stuName.includes(stuName)) {
        return false;
      }
      if (
        classAdvisor &&
        item.classAdvisor &&
        !item.classAdvisor.includes(classAdvisor)
      ) {
        //辅导员名可能为空，需要提前判断
        return false;
      }
      return true;
    });
    // 更新结果
    setResult(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setResult(initialData); // 重置为初始数据
  };

  return (
    <div>
      <ConfigProvider locale={zhCN}>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              课堂成绩列表
            </span>
          }
        >
          <ProForm
            layout="inline"
            onFinish={searchOnFinish}
            onReset={handleReset}
          >
            <ProFormText
              label="姓名"
              name="stuName"
              placeholder="请输入学生姓名"
              width={160}
            />
            <ProFormText
              label="辅导员"
              name="classAdvisor"
              placeholder="请输入辅导员姓名"
              width={160}
            />
          </ProForm>
        </Card>
        <Card>
          <Table
            columns={columns}
            dataSource={result}
            onChange={handleChange}
          />
        </Card>
        <ScoreAnalysis></ScoreAnalysis>
      </ConfigProvider>
    </div>
  );
};
export default ScoreList;
